<template>
    <div class="agent-info-card">
        <div class="agent-header">
            <div class="agent-avatar">
                <img :src="agentData.avatar || '/profile/avatar/default-avatar.jpg'" :alt="agentData.name" />
            </div>
            <div class="agent-basic">
                <h3 class="agent-name">{{ agentData.name }}</h3>
                <p class="agent-title">{{ agentData.title }}</p>
                <div class="agent-tags">
                    <el-tag size="small" type="success">{{ agentData.stats?.experience || 0 }}年经验</el-tag>
                    <el-tag size="small" type="info">{{ agentData.serviceArea || '暂无' }}</el-tag>
                </div>
            </div>
        </div>
        
        <div class="agent-stats">
            <div class="stat-item">
                <span class="value">{{ agentData.stats?.deals || 0 }}</span>
                <span class="label">成交</span>
            </div>
            <div class="stat-item">
                <span class="value">{{ agentData.stats?.views || 0 }}</span>
                <span class="label">带看</span>
            </div>
            <div class="stat-item">
                <span class="value">{{ agentData.stats?.rating || 5.0 }}</span>
                <span class="label">评分</span>
            </div>
        </div>

        <div class="agent-expertise" v-if="agentData.expertise">
            <h4>专业领域</h4>
            <p>{{ agentData.expertise }}</p>
        </div>

        <div class="agent-contact">
            <el-button type="primary" @click="handleChat">
                <el-icon><ChatDotRound /></el-icon>
                在线咨询
            </el-button>
            <el-button @click="handleAppointment">
                <el-icon><Calendar /></el-icon>
                预约看房
            </el-button>
        </div>
    </div>
</template>

<script setup>
import { ChatDotRound, Calendar } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { startChat, makeAppointment } from '@/api/agent'

const props = defineProps({
    agentData: {
        type: Object,
        required: true,
        default: () => ({
            agentId: '',
            name: '',
            title: '',
            avatar: '',
            serviceArea: '',
            expertise: '',
            stats: {
                experience: 0,
                deals: 0,
                views: 0,
                rating: 0
            }
        })
    },
    houseId: {
        type: [String, Number],
        default: ''
    }
})

const handleChat = async () => {
    try {
        await startChat({
            agentId: props.agentData.agentId,
            houseId: props.houseId
        })
        ElMessage.success('已发起聊天')
    } catch (error) {
        console.error('发起聊天失败:', error)
        ElMessage.error('发起聊天失败')
    }
}

const handleAppointment = async () => {
    try {
        await makeAppointment({
            agentId: props.agentData.agentId,
            houseId: props.houseId
        })
        ElMessage.success('预约成功')
    } catch (error) {
        console.error('预约失败:', error)
        ElMessage.error('预约失败')
    }
}
</script>

<style lang="scss" scoped>
.agent-info-card {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

    .agent-header {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        .agent-avatar {
            width: 80px;
            height: 80px;
            border-radius: 40px;
            overflow: hidden;
            margin-right: 16px;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .agent-basic {
            flex: 1;

            .agent-name {
                font-size: 20px;
                font-weight: 600;
                color: #2F3B59;
                margin-bottom: 4px;
            }

            .agent-title {
                color: #6D737A;
                font-size: 14px;
                margin-bottom: 8px;
            }

            .agent-tags {
                display: flex;
                gap: 8px;
            }
        }
    }

    .agent-stats {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24px;
        padding: 16px 0;
        border-top: 1px solid #EBEEF5;
        border-bottom: 1px solid #EBEEF5;

        .stat-item {
            text-align: center;

            .value {
                display: block;
                font-size: 20px;
                font-weight: 600;
                color: #4A60A1;
                margin-bottom: 4px;
            }

            .label {
                font-size: 12px;
                color: #6D737A;
            }
        }
    }

    .agent-expertise {
        margin-bottom: 24px;
        
        h4 {
            font-size: 14px;
            color: #2F3B59;
            margin-bottom: 8px;
        }

        p {
            font-size: 14px;
            color: #6D737A;
            line-height: 1.6;
        }
    }

    .agent-contact {
        display: flex;
        gap: 12px;

        .el-button {
            flex: 1;
            padding: 12px 0;
            
            .el-icon {
                margin-right: 4px;
            }
        }
    }
}
</style> 